/**
 * @name 获取内容的宽度，除padding和border
 * @description 克隆一个元素与当前元素的根元素一致，并且添加子元素，设置其宽度为100%，则子元素的宽度即当前元素的内容宽度
 * @param {*} element  目标元素
 * @returns {number}
 */

export function getContentWidth(element) {
  const parentElement = element.parentElement;
  if (!parentElement) return;
  const cloneEle = element.cloneNode();
  const innerHTML = document.createElement("div");
  innerHTML.style.width = "100%";
  cloneEle.appendChild(innerHTML);
  parentElement.appendChild(cloneEle);
  const width = innerHTML.getBoundingClientRect().width; //innerHTML.scrollWidth;
  parentElement.removeChild(cloneEle);
  return width;
}

/**
 * @name 获取内容的高度，除padding和border
 * @description 克隆一个元素与当前元素一致，且重置指定的属性值为0，即可得到当前元素的内容高度
 * @param {*} element  目标元素
 * @returns {number}
 */

export function getContentHeight(element) {
  const parentElement = element.parentElement;
  if (!parentElement) return;
  const restStyleMaps = {
    "padding-top": 0,
    "padding-bottom": 0,
    "border-top-width": 0,
    "border-bottom-width": 0
  };
  const cloneEle = element.cloneNode();
  cloneEle.innerHTML = element.innerHTML;
  Object.entries(restStyleMaps).forEach(([key, style]) => {
    cloneEle.style[key] = style;
  });
  parentElement.appendChild(cloneEle);
  const height = cloneEle.getBoundingClientRect().height;
  parentElement.removeChild(cloneEle);
  return height;
}

/**
 *
 * @param fn {Function}   实际要执行的函数
 * @param delay {Number}  延迟时间，也就是阈值，单位是毫秒（ms）
 * @return {Function}     返回一个“去弹跳”了的函数
 */
export function debounce(fn, delay) {
  var timer;
  return function() {
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}
